<template>
  <div>
    <ul>
      <li v-for="(item,index) in list" :key="index"  @click="goNext(index)"><router-link :class="[ingnum==index?'active':'',item.status==0?'':'isclick']" :to="item.workflow_node.uri">{{item.workflow_node.title}}</router-link></li>
    </ul>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data() {
    return {
      // list: [
      //   { name: "项目详情", linkto: "/process/details",isclick:true},
      //   { name: "文档翻译", linkto: "/process/translation" ,isclick:true},
      //   { name: "图表制作", linkto: "/process/form" ,isclick:true},
      //   { name: "润色", linkto: "/process/polish" ,isclick:true},
      //   { name: "文档格式排版", linkto: "/process/typesetting",isclick:true },
      //   { name: "杂志推荐", linkto: "/process/recommend" ,isclick:true},
      //   { name: "润色结果", linkto: "/process/result",isclick:true }
      // ],
      ingnum: 0,//正在进行哪一步
    };
  },
  mounted () {
    if(!sessionStorage.getItem("processhead")){
      this.ingnum = 0
    }else{
      this.ingnum = sessionStorage.getItem("processhead")
    }
  },
  store,
  computed: {
    list(){
      if(sessionStorage.getItem('teamleave')==2||sessionStorage.getItem('teamleave')==1){
        let num = store.state.node.findIndex((item)=>item.status==1)
        console.log(num)
        if(num>0){
          setTimeout(() => {
            this.goNext(num)
          }, 500);
        }
        if(store.state.node.length>0){
          if(num==-1){
            // this.$router.go(0)
          }
        }
        console.log(store.state.node)
        if(this.$store.state.pdetail.order_details){

          // store.state.node.shift()
        }
        return store.state.node
      }else{
        let num = store.state.node.findIndex((item)=>item.status==1)
        console.log(num)
        if(num>0){
          setTimeout(() => {
            this.goNext(num)
          }, 500);
        }else{
          this.ingnum = -1
        }
        return store.state.node
      }
    }
  },
  methods: {
    goNext(e){
      this.ingnum = e
      // this.$router.push(this.list[e].workflow_node.uri)
      if(e!=0){
        console.log(this.list[e].id)
        this.$api.Node.show(this.list[e].id).then(res=>{
          store.commit('changenodeuser', res.data.data.users)
        })
      }
      sessionStorage.setItem("processhead",e)
    }
  }
};
</script>

<style lang='scss' scoped>
ul {
  display: flex;
  width: calc(100% - 80px);
  height: 36px;
  background: #fafafa;
  margin: 8px auto 0;
  padding-left: 30px;
  box-sizing: border-box;
  align-items: center;
  overflow: hidden;
  li {
    pointer-events:none;
    a {
      color: #b5b5b5;
      text-decoration: none;
      padding: 5px 20px;
      font-size: 14px;
    }
    a.active {
      background: #56aff7;
      border-radius: 5px;
      color: #fff;
    }
    a.isclick {
      color: rgb(81, 81, 81);
      pointer-events:auto;
    }
    a.isclick.active {
      color: #fff;
    }
  }
}
</style>